<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  li{
    list-style: none;
  }
  .nav{
    width: 850px;
    height: 40px;
    background: #000;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
  }
  div{
    font-size: 13px;
    width: 850px;
    margin: 0 auto;
    display: none;
    margin-top: 10px;
    color: hotpink;
  }
  span:hover{
    border-bottom: 2px solid black;
  }
  .box1{
    position: absolute;
    left: 340px;
  }
</style>
<body>
  <ul class="nav">
    <a>站长之家</a>
    <li>行业资讯</li>
    <li>站长在线</li>
    <li>网站运营</li>
    <li>设计在线</li>
    <li>网络编程</li>
    <li>联盟资讯</li>
    <li>服务器</li>
  </ul>
  <div class="box1" style="display: block;">
    <span>业界动态</span>
    <span>收购融资</span>
    <span>门户动态</span>
    <span>搜索引擎</span>
    <span>网络游戏</span>
    <span>电子商务</span>
    <span>广告传媒</span>
    <span>厂商开发</span>
  </div>
  <div class="box2">
    <span>站长报道</span>
    <span>好战推荐</span>
    <span>站长聚会</span>
    <span>站长访谈</span>
    <span>站长茶馆</span>
    <span>网站排名</span>
  </div>
  <div class="box3">
    <span>建站经验</span>
    <span>策划盈利</span>
    <span>搜索优化</span>
    <span>网站推广</span>
    <span>免费资源</span>
  </div>
  <div class="box4">
    <span>酷站推荐</span>
    <span>网页设计</span>
    <span>WEB标准</span>
    <span>视频处理</span>
    <span>设计活动</span>
  </div>
  <div class="box5">
    <span>Asp编程</span>
    <span>Php编程</span>
    <span>Net编程</span>
    <span>Xml编程</span>
    <span>Mssql</span>
    <span>Mysql</span>
  </div>
  <div class="box6">
    <span>联盟动态</span>
    <span>联盟介绍</span>
    <span>联盟点评</span>
    <span>网赚技巧</span>
  </div>
  <div class="box7">
    <span>Web服务器</span>
    <span>Ftp服务器</span>
    <span>Mail服务器</span>
    <span>Dns服务器</span>
    <span>Win服务器</span>
    <span>Linux服务器</span>
    <span>安全防护</span>
    <span>虚拟主机</span>
  </div>
</body>
<script>
  var lis=document.querySelectorAll('li')
  var divs=document.querySelectorAll('div')
  var box1=document.querySelector('.box1')
  var box2=document.querySelector('.box2')
  var box3=document.querySelector('.box3')
  var box4=document.querySelector('.box4')
  var box5=document.querySelector('.box5')
  var box6=document.querySelector('.box6')
  var box7=document.querySelector('.box7')


    for(var i=0;i<lis.length;i++){
      lis[i].index=i
      lis[i].onmousemove=function(){
        for(var j=0;j<divs.length;j++){
          divs[this.index].style.display="block"
          divs[this.index].style.left=340+'px'
         }
        }
        lis[i].onmouseleave=function(){
          for(var j=0;j<divs.length;j++){
            divs[j].style.display="none"
            
         }
        }
     
      
    }
  
</script>
</html>